<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        } 
        .box{
            width: 700px;
            height: 800px;  
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="zexi box"></div>
    <div class="huan box"></div>
    <div class="land box"></div>
    <div class="leida box"></div>
    <script src="./js/echarts.min.js"></script>
    <script>
        const myChart1 = echarts.init(document.querySelector('.zexi'))
        const myChart2 = echarts.init(document.querySelector('.huan'))
        const myChart3 = echarts.init(document.querySelector('.land'))
        const myChart4 = echarts.init(document.querySelector('.leida'))
        const option1 = {
            title:{
                text:'2023全学科薪资走势',
                left:'center'
            },
            tooltip:{
            trigger:'axis'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                axisLine: {
                    lineStyle: {
                        type: 'dashed', // 设置为虚线
                        // color:'#d8dada'
                    }
                }
            },
        yAxis: {
            type: 'value',
            splitLine:{
            lineStyle:{
                type:'dashed',
                color:'#e5eaf3'
            }
            }
        },
        series: [
            {
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1100,1200,2312,2344,3000],
            type: 'line',
            smooth: true,
            symbolSize:10,
            lineStyle:{
                width:7,
                color:'#57a0ff'
            },
            areaStyle:{
                color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#61a1f8' // 0% 处的颜色
                    }, {
                        offset: 0.8, color: '#fff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
            }
        ]
        };
        //环形图
       const option2 = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
        };
        //南丁图
        option3 = {
        title: {
            text: 'Nightingale Chart',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: [
            'rose1',
            'rose2',
            'rose3',
            'rose4',
            'rose5',
            'rose6',
            'rose7',
            'rose8'
            ]
        },
        toolbox: {
            show: true,
            feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
            }
        },
        series: [
            {
            name: 'Radius Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['25%', '50%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            label: {
                show: false
            },
            emphasis: {
                label: {
                show: true
                }
            },
            data: [
                { value: 40, name: 'rose 1' },
                { value: 33, name: 'rose 2' },
                { value: 28, name: 'rose 3' },
                { value: 22, name: 'rose 4' },
                { value: 20, name: 'rose 5' },
                { value: 15, name: 'rose 6' },
                { value: 12, name: 'rose 7' },
                { value: 10, name: 'rose 8' }
            ]
            },
            {
            name: 'Area Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['75%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 5
            },
            data: [
                { value: 30, name: 'rose 1' },
                { value: 28, name: 'rose 2' },
                { value: 26, name: 'rose 3' },
                { value: 24, name: 'rose 4' },
                { value: 22, name: 'rose 5' },
                { value: 20, name: 'rose 6' },
                { value: 18, name: 'rose 7' },
                { value: 16, name: 'rose 8' }
            ]
            }
        ]
        };
        //雷达图
        option4 = {
        title: {
            text: 'Proportion of Browsers',
            subtext: 'Fake Data',
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function () {
            var list = [];
            for (var i = 1; i <= 28; i++) {
                list.push(i + 2000 + '');
            }
            return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true
        },
        radar: {
            indicator: [
            { text: 'IE8-', max: 400 },
            { text: 'IE9+', max: 400 },
            { text: 'Safari', max: 400 },
            { text: 'Firefox', max: 400 },
            { text: 'Chrome', max: 400 }
            ]
        },
        series: (function () {
            var series = [];
            for (var i = 1; i <= 28; i++) {
            series.push({
                type: 'radar',
                symbol: 'none',
                lineStyle: {
                width: 1
                },
                emphasis: {
                areaStyle: {
                    color: 'rgba(0,250,0,0.3)'
                }
                },
                data: [
                {
                    value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                    ],
                    name: i + 2000 + ''
                }
                ]
            });
            }
            return series;
        })()
        };
        myChart1.setOption(option1)
        myChart2.setOption(option2)
        myChart3.setOption(option3)
        myChart4.setOption(option4)
    </script>
</body>
</html>